<template>
    <div class="record">
      <el-row style="margin-top: 20px;margin-left: 10px">
        <el-col :span="8">
          <span style="font-size: 13px"><router-link :to="{path:'/customermerge'}"><i class="el-icon-back"></i>返回</router-link></span>
        </el-col>
        <el-col :span="6">
          数据变更记录
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="time1"
            size="small"
            type="daterange"
            align="right"
            :picker-options="pickerOptions0"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="init"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
      </el-row>
      <div style="margin-left: 30px;margin-bottom: 90px">
        <p style="font-size: 13px">数据表：<span style="color:#009EFB">客户合并</span></p>
        <el-table :data="tableData.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%">
          <el-table-column prop="empId.empName" label="操作人" width="210">
          </el-table-column>

          <el-table-column prop="mergeTime" sortable label="操作时间">
            <template slot-scope="scope">
              {{ scope.row.mergeTime | formatDate}}
            </template>
          </el-table-column>

          <el-table-column prop="mergeXixi" label="操作明细">
          </el-table-column>
        </el-table>
        <div style="margin-left: 560px;margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
export default {
  name: 'CuMergeRecord',
  data () {
    return {
      tableData: [],
      pageSize:5,//页大小
      pageTotal:0,//内容总条数
      pageNum: 1,//当前页
      time1:[],//时间段
      // 设置时间选择器只能选择当前时间之前的时间
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
    }
  },
  created:function() {
    this.init()
  },
  methods:{
    init(){
      var str='';
      if(this.time1 != null){
        str = this.time1[0]+','+this.time1[1];
        if(this.time1[0]==undefined){
          str='';
        }
      }
      this.$axios.get("http://localhost:8088/vue/select-merge",{params:{str:str}})
      .then(v=>{
        this.tableData=v.data
      }).catch()
    },
    //前端分页
    handleSizeChange: function (size) {
      this.pageSize = size;
      console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.pageNum = currentPage;
      console.log(this.pageNum)  //点击第几页
    },
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
  },

}
</script>

<style scoped>
  .record{
    width: 100%;
    background: white;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: #ccc 0px 0px 10px;
    min-height: 650px;
    overflow:hidden;
  }

  a{
    text-decoration: none;
  }

  a:active{
    color: black;
  }
</style>
